<template>
  <div>
    <div class="werapp">
      <a href="javascript:;;" class="werapp-item">
        <img class="werapp-img" src="../assets/cnodejs_light.svg" alt="" />
      </a>
      <div class="werapp-input">
        <span class="iconfont">&#xe6ca;</span>
        <input type="text" />
      </div>
      <div class="werapp-but">
        <ul>
          <li>首页</li>
          <li>新手入门</li>
          <li>API</li>
          <li>关于</li>
          <li>注册</li>
          <li>登录</li>
        </ul>
      </div>
    </div>
    <div class="box">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="change(item)">
          <router-link :to="'/' + item.desc" tag="p">{{
            item.title
          }}</router-link>
        </li>
      </ul>
    </div>
     <div class="footer" v-for="(item, index) in goods" :key="index">
        <img :src="item.author.avatar_url" alt="" />
        <div class="btn">{{item.top?'置顶':""}}</div>
        <div class="tecl" v-html="item.title"></div>
        <div class="text" v-html="changeTime(item.create_at)"></div>
      </div>
  </div>
</template>

<script>
import {changeTime} from "../utils/time"
import axios from "axios";
import list from "../assets/list.json";
export default {
  data() {
    return {
      list: list,
      flag: "",
      goods:[],
      changeTime,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    change(item) {
      this.flag = item.desc;
      console.log(this.flag);
      this.getdata();
    },
    getdata() {
      axios
        .get(`https://cnodejs.org/api/v1/topics?tab=${this.flag}`)
        .then((res) => {
          console.log(res.data.data);
          this.goods=res.data.data
        });
    },
  },
};
</script>

<style lang="stylus" scoped>
.werapp {
  overflow: hidden;
  background: #444;
  display: flex;
  flex-wrap: wrap;

  .werapp-item {
    width: 120px;
    height: 34px;
    padding: 3px 20px;

    .werapp-img {
      width: 120px;
      height: 29px;
    }
  }

  .werapp-input {
    width: 233px;
    height: 26px;
    margin-top: 6px;
    background: white;
    border-radius: 15px;
    line-height: 26px;
  }

  .werapp-but {
    color: #999;
    margin-left: 195px;

    ul {
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;

      li {
        padding: 13px;

        &:hover {
          color: white;
        }
      }
    }
  }
}

.box {
  margin-top: 20px;
  background: #e1e1e1;

  ul {
    list-style: none;
    display: flex;

    li {
      padding: 10px 20px;
      color: #80bd01;

      &:hover {
        color: white;
        background: #80bd01;
      }
    }
  }
}
 .footer {
      display: flex;
      border-bottom: 1px solid #f0f0f0
      img {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        padding-right: 10px;
      }
      .btn{
        line-height: 35px
        padding:0 3px
        background: #80bd01
        color: white
      }
      .tecl {
        flex: 1
        line-height: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .text{
        width: 50px
        line-height: 35px
      }
    }
</style>